<!--
	作者：andli
	时间：2015-10-22
	描述：图片轮播 加载本地图片 实现自动循环播放
-->

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<div class="mui-content">

			<div class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<div class="mui-slider-item">
						<a href="#">
							<img src="images/img_03.png">
							<p class="mui-slider-title">微微一笑很倾城</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="images/img_01.png">
							<p class="mui-slider-title">微微一笑很倾城</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="images/img_02.png">
							<p class="mui-slider-title">东京爱情故事</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="images/img_03.png">
							<p class="mui-slider-title">剩女W小姐脱光记</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="images/img_01.png">
							<p class="mui-slider-title">微微一笑很倾城</p>
						</a>
					</div>

				</div>
				<!--下标-->
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>

		</div>
		<script type="text/javascript" src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui.plusReady(function() {
				//通过js api 实现自动轮播
				var gallery = mui('.mui-slider');
				gallery.slider({
					interval: 2000 //轮播周期2s，默认为0：不轮播
				});
				//gallery.slider().gotoItem(0);//跳转到第0张图片，下标从0开始
			});
		</script>
	</body>

</html>